<template>
    <div class="coupon" >
        <image src="bmlocal://assets/acw/bj_a.png" class="coupon_bg"></image>
        <div class="coupon-top">
            <text class="coupon-title">{{data.couponName}}</text>
        </div>
        <div class="coupon-middle">
            <div class="mid-l" v-if="data.couponType == 1">
                <text class='moneyTag'>￥</text>
                <text class="price">&nbsp;&nbsp;{{data.reductionAmount}}</text>
            </div>
            <div class="mid-l" v-if="data.couponType == 2">
                <text class='price'>{{data.discount}}</text>
                <text class="moneyTag">折</text>
            </div>
            <div class="mid-l" v-if="data.couponType == 3">
                <text class="price">兑换券</text>
            </div>
            <div class="mid-r">
                <text class='useinfo1'>{{data.storeTypeText}}</text>
                <text class='useinfo2'>满{{data.overAmount}}元可以使用</text>
            </div>
        </div>
        <div class="coupon-bottom">
            <text class='usedaterange'>{{data.startTime}} --  {{data.endTime}}</text>
            <text class='tip' v-if="data.couponType == 3 && data.couponName=='一年或20000公里质保兑换券'" @click="toCouponDetail">汽车检测</text>
        </div>
    </div>
</template>
<script>
// couponType 1 代金券  2 折扣券  3 兑换券
const modal = weex.requireModule('modal');
export default {
    props: ["data"],
    data: () => ({
    }),
    created(){
        // this.data.workerAvatar = this.data.workerAvatar || this.data.defPho;
    },
    computed: {
    },
    methods: {
        toCouponDetail(){
            
            this.$router.open({
                name: 'acw.service.inspection',
                type: 'PUSH',
                params: {
                    'typ':JSON.stringify(3),
                    'id':this.data.couponId
                }
            });
        }
        
    }
}
</script>
<style lang="scss" scoped>
@import 'src/js/css/core/base.scss';

.iconfont {
    font-family: iconfont;
}
.nativeplusfont {
    font-family: nativeplusfont;
}

.coupon{
    border-radius:8px;
    margin:0 30px 40px;
    padding-top:10px;
    position: relative;
}
.coupon_bg{
    position: absolute;
    width:710px;
    height:225px;
    left:-10px;
    top:0;
}
.coupon-top,.coupon-middle{
    margin:0 30px
}
.coupon-title{
    color:#fff;
}
.coupon-middle{
    display:flex;
    justify-content: space-between;
    flex-direction: row;
    height:60px;
    margin-bottom:10px;
    margin-top:10px;
    padding-bottom:10px;

}
.mid-l{
    width:300px;
    display:flex;
    flex-direction: row;
    align-items: flex-end;
    position: relative;
    justify-content: space-between;
}
.moneyTag{
    color:#fff;
    font-size: 24px;
    position: absolute;
    margin-left: 20px;
    bottom:6px;
}
.price{
    font-size: 38px;
    color:#fff;
}
.mid-r{
    flex:1;
    display:flex;
    justify-content: center;
    align-items: center;
}
.useinfo1{
    color:#fff;
}
.useinfo2{
    color:#fff;
    font-size:24px;
}
.coupon-bottom{
    display:flex;
    margin-top:20px;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}
.tip{
    font-size:24px;
    color: red;
}
.usedaterange{
    font-size:24px;
    color: #666666;
}
</style>
